<template>
  <!-- 收货地址 -->
  <view>
    <view class="headImg">
      <c-navBar title="地址" isPerch isTran></c-navBar>
    </view>
    <view class="main">
      <view class="oneBox" v-for="(v, i) in addressList" :key="v.id">
        <view style="display: flex; align-items: center">
          <image src="@/pages/my/static/address.png" mode="widthFix"></image>
          <view class="">
            <view class="df aic">
              <view class="name">{{ v.userName }}</view>
              <view class="tel">{{ v.phone }}</view>
              <view class="default" v-if="v.defaultValue == 1">默认</view>
            </view>
            <view class="addres">
              {{ v.address }}
            </view>
          </view>
        </view>
        <view class="df">
          <view class="editor" @click="jumpEditAddress(v)">编辑</view>
          <view class="del" @click="delAddrees(v)">删除</view>
        </view>
      </view>
    </view>

    <view class="bottom_btn" @click="jumpEditAddress">
      <view
        class="btn"
        style="background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%)"
        >+添加收货地址</view
      >
    </view>
    <view v-if="addressList.length == 0" class="no-data">
      <image src="/static/common/noContent.png" mode=""></image>
      无收货地址
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      showpage: 10,
      addressList: [
        {
          id: 1,
          phone: 13118441212,
          address: "这是地址呢地址地址四川泸州",
          consignee: "编译",
          is_default: 1,
        },
        {
          id: 2,
          phone: 13118441212,
          address: "请另行在小程序开发工具的控制台查看",
          consignee: "编译",
          is_default: 0,
        },
        {
          id: 3,
          phone: 13118441212,
          address: "请另行在小程序开发工具的控制台查看",
          consignee: "编译",
          is_default: 0,
        },
      ],
    };
  },
  onShow() {
    this.getAddressData();
  },
  methods: {
    // 获取地址详情
    getAddressData() {
      this.$api
        .addressListY({})
        .then((res) => {
          console.log(res);
          this.addressList = res.data;
        })
        .catch((err) => {
          console.log(err.data, "err");
          if (err.data.code == 0) {
            this.addressList = [];
          }
        });
    },
    // 跳转到编辑地址
    jumpEditAddress(v) {
      uni.navigateTo({
        url: "/pages/my/pages/editAddress?id=" + v.id,
      });
    },
    // 删除按钮
    delAddrees(v) {
      console.log(v);
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否确定删除这个地址",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            that.$api
              .delAddressY({
                id: v.id,
              })
              .then((res) => {
                console.log(res);
                if (res.code == 200) {
                  uni.showToast({
                    title: "删除成功",
                    icon: "none",
                    duration: 2000,
                  });
                  that.getAddressData();
                }
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.headImg {
  width: 750rpx;
  height: 320rpx;
  background-color: #fff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}

.main {
  margin-top: -150rpx;
  padding: 0rpx 30rpx 180rpx;
  overflow-y: scroll;
}

.oneBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #f0f2f5;
  padding: 40rpx 0 30rpx;

  image {
    width: 48rpx;
    margin-right: 24rpx;
  }

  .name {
    font-size: 28rpx;
    font-weight: bold;
    margin-right: 30rpx;
  }

  .tel {
    font-size: 24rpx;
  }

  .addres {
    margin-top: 12rpx;
    width: 500rpx;
    font-size: 24rpx;
  }

  .editor {
    color: #2ad03d;
    font-size: 24rpx;
  }

  .del {
    margin-left: 20rpx;
    color: #ed1010;
    font-size: 24rpx;
  }

  .default {
    width: 66rpx;
    height: 32rpx;
    background: #ff802f;
    border-radius: 16rpx;
    color: #fff;
    font-size: 20rpx;
    text-align: center;
    margin-left: 20rpx;

    &.dn {
      display: none;
    }
  }
}

.no-data {
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #bcbcbc;
  font-size: 28rpx;

  image {
    width: 300rpx;
    height: 140rpx;
  }
}
</style>
